CSS animations

To view the animation in the box below, click the checkbox 'Play the animation' or hover the cursor over the box. When the animating is active, the cloud at the top changes shape, snowflakes fall, and the snow level at the bottom rises. To pause the animation, uncheck the checkbox or move your cursor away from the box.

This sample animation uses animation-iteration-count to make the flakes fall repeatedly, animation-direction to make the cloud move back and forth, animation-fill-mode to raise the snow level in response to the cloud movement, and animation-play-state to pause the animation.

To see the code for this animation, view the source on Github.